<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
        .box1{
            transform: translate(200px,300px);
            -moz-transform:translate(200px,300px);
            -o-transform: translate(200px,300px);
            -ms-transform: translate(200px,300px);
            -webkit-transform: translate(200px,300px);
        }
        .box2{
            transform: rotate(50deg);
            -moz-transform:rotate(50deg);
            -o-transform: rotate(50deg);
            -ms-transform: rotate(50deg);
            -webkit-transform: rotate(50deg);
        }
        .box3{
            transform: scale(0.3,0.3);
            -moz-transform:scale(0.3,0.3);
            -o-transform:scale(0.3,0.3) ;
            -ms-transform: scale(0.3,0.3);
            -webkit-transform:scale(0.3,0.3);
        }
        .box4{
            transform: skew(100deg,200deg);
            -moz-transform:skew(100deg,200deg);
            -o-transform: skew(100deg,200deg);
            -ms-transform: skew(100deg,200deg);
            -webkit-transform:skew(100deg,200deg) ;
        }
    </style>
</head>
<body>
<div>
    <img src="img/tx.jpg" id="imgag">
</div>
<input type="button" value="移动" onclick="fn()">
<input type="button" value="旋转" onclick="fn1()">
<input type="button" value="缩放" onclick="fn2()">
<input type="button" value="翻转" onclick="fn3()">
<script type="text/javascript">
    function fn(){
        var img=document.getElementById("imgag");
        img.className="box1";
    }
    function fn1(){
        var img=document.getElementById("imgag");
        img.className="box2";
    }
    function fn2(){
        var img=document.getElementById("imgag");
        img.className="box3";
    }
    function fn3(){
        var img=document.getElementById("imgag");
        img.className="box4";
    }
</script>
</body>
</html>